//获取文章分类列表渲染到页面中
async function getCates() {
  const res = await reqGetCates()
  $('.layui-card tbody').empty()
  // console.log(res.data.data)
  res.data.data.forEach((item) => {
    let theTr = `<tr>
      <td>${item.name}</td>
      <td>${item.alias}</td>
      <td>
        <button myid="${item.Id}" myname="${item.name}" myalias="${item.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
        <button myid="${item.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
      </td>
    </tr>`
    $('.layui-card tbody').append(theTr)
  })
}
getCates()

//给添加类别按钮注册事件
const add_str = `
    <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
    </form>
  `
$('.add').on('click', function () {
  let index = layer.open({
    type: 1,
    content: add_str, //这里content是一个普通的String
    area: ['500px', '300px'],
    title: '新增类别',
    success: function () {
      $('.add-form').on('submit', async (e) => {
        e.preventDefault()
        // $('input[name=name]').val()
        // $('input[name=alias]').val()
        await reqAddCate($('.add-form').serialize())
        layer.close(index)
        getCates()
      })
    },
  })
})

//给删除按钮绑定点击事件
$('.layui-table tbody').on('click', '.delete', function () {
  layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, async () => {
    await delCateAPI($(this).attr('myid'))
    $(this).parents('tr').remove()
  })
})

//给编辑按钮绑定submit 事件委托
const edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`
$('.layui-table tbody').on('click', '.edit', function () {
  let Id = $(this).attr('myid')
  let name = $(this).attr('myname')
  let alias = $(this).attr('myalias')
  let index = layer.open({
    type: 1,
    content: edit_str,
    title: '编辑分类',
    area: ['500px', '300px'],
    success: () => {
      layui.form.val('edit', {
        Id,
        name,
        alias,
      })
      $('.add-form').on('submit', async (e) => {
        e.preventDefault()
        let argStr = $('.add-form').serialize()
        await updateCateAPI(argStr)
        layer.close(index)
        getCates()
      })
    },
  })
})
